<template>
	<div class="com-chart" ref="bar1_ref"></div>
</template>

<script>
	export default {
		name: 'Barchart1',
		data() {
			return {
				chartInstance: null,
				echartoption: {},
			}
		},
		props: ['message'],
		mounted() {
			this.initChart();
			window.addEventListener("resize", () => {
				this.chartInstance.resize();
			});
		},
		destroyed() {
			window.removeEventListener("resize", () => {
				this.chartInstance.resize();
			});
		},
		watch: {
			message() {
				//alert(this.message);
				if (this.message == '2019') {
					this.echartoption.series[0].data = [200, 300, 300, 900, 1500, 1200, 600];
				} else {
					this.echartoption.series[0].data = [300, 400, 350, 800, 1800, 1400, 700];
				}
				this.chartInstance.setOption(this.echartoption);
			}
		},
		methods: {
			initChart() {
				this.chartInstance = this.$echarts.init(this.$refs.bar1_ref);
				this.echartoption = {
					color: ["#2f89cf"],
					tooltip: {
						trigger: "axis",
						axisPointer: {
							// 坐标轴指示器，坐标轴触发有效
							type: "shadow" // 默认为直线，可选为：'line' | 'shadow'
						}
					},
					grid: {
						left: "0%",
						top: "10px",
						right: "0%",
						bottom: "4%",
						containLabel: true
					},
					xAxis: [{
						type: "category",
						data: [
							"旅游行业",
							"教育培训",
							"游戏行业",
							"医疗行业",
							"电商行业",
							"社交行业",
							"金融行业"
						],
						axisTick: {
							alignWithLabel: true
						},
						axisLabel: {
							textStyle: {
								color: "rgba(255,255,255,.6)",
								fontSize: "12"
							}
						},
						axisLine: {
							show: false
						}
					}],
					yAxis: [{
						type: "value",
						axisLabel: {
							textStyle: {
								color: "rgba(255,255,255,.6)",
								fontSize: "12"
							}
						},
						axisLine: {
							lineStyle: {
								color: "rgba(255,255,255,.1)"
								// width: 1,
								// type: "solid"
							}
						},
						splitLine: {
							lineStyle: {
								color: "rgba(255,255,255,.1)"
							}
						}
					}],
					series: [{
						name: "金额（亿元）",
						type: "bar",
						barWidth: "35%",
						data: [200, 300, 300, 900, 1500, 1200, 600],
						itemStyle: {
							barBorderRadius: 5
						}
					}]
				};
				this.chartInstance.setOption(this.echartoption);
			}
		}
	}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>

</style>
